<template>
  <view class="goods-list">
    <view class="goods-item">
      <!-- 右侧图片区域 -->
      <view class="goods-pic">
        <radio :checked="goods.goods_state" color="#FF3F34" v-show="showRadio" @click="checkedHandler(goods)"></radio>
        <image :src="goods.goods_small_logo || defaultImage"></image>
      </view>
      <!-- 左侧标题价格区域 -->
      <view class="goods-info">
        <!-- 商品标题 -->
        <view class="goods-title">{{ goods.goods_name }}</view>
        <!-- 商品价格 -->
        <view class="goods-price-num">
          <!-- 商品价格 -->
          <view class="goods-price">
            ￥{{ goods.goods_price | toFixed }}
          </view>
          <!-- 商品数量 -->
          <view class="goods-num" v-show="showNum">
            <uni-number-box :min="0" :value="goods.goods_count" @change="bindChange"></uni-number-box>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    // 商品的信息
    goods: {
      type: Object,
      default: {}
    },
    // 是否显示单选框
    showRadio: {
      type: Boolean,
      default: false
    },
    // 是否显示计数器
    showNum: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 默认展示图片
      defaultImage: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png'
    };
  },
  methods: {
    // 单选框的点击事件事件处理函数
    checkedHandler(goods) {
      // 触发自定义事件checkedChange，并传递参数
      this.$emit('checkedChange', { goods_id: goods.goods_id, goods_state: !goods.goods_state });
    },
    // 计数器值发生变化的事件处理函数
    bindChange(goods_count) {
      this.$emit('numChange', {
        goods_count: goods_count - 0,
        goods_id: this.goods.goods_id
      })
    }
  },
  onLoad() {}
};
</script>

<style lang="scss">
.goods-list {
  .goods-item {
    display: flex;
    padding: 10px;
    border-bottom: 1px solid #efefef;
    .goods-pic {
      display: flex;
      align-items: center;
      image {
        width: 240rpx;
        height: 180rpx;
      }
    }
    .goods-info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 5px;
      .goods-title {
        font-size: 12px;
      }
      .goods-price-num {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .goods-price {
          color: #ff3f34;
        }
      }
    }
  }
}
</style>
